import React, { useEffect, useState } from 'react'
import { DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Table, Button, Modal, Tree } from 'antd'
import axios from 'axios'
const { confirm } = Modal
export default function RoleList() {
    const [dataSource, setdataSource] = useState([])
    const [rightList, setrightList] = useState([])
    const [currRights, setcurrRights] = useState([])
    const [currRightId, setcurrRightId] = useState([])
    const [modelVisable, setmodelVisable] = useState(false)
    useEffect(() => {
        query()
    }, [])

    useEffect(() => {
        axios.get('/rights?_embed=children').then(res => {
            setrightList(res.data)
        })
    }, [])

    const query = () => {
        axios.get('/roles').then(res => {
            setdataSource(res.data)
        })
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '角色名称',
            dataIndex: 'roleName'
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    <Button onClick={() => {
                        setmodelVisable(true)
                        setcurrRightId(item.id)
                        setcurrRights(item.rights)
                    }} style={{ margin: '4px' }} type="primary" shape="circle" icon={<UnorderedListOutlined />} />

                    <Button onClick={() => confirmMethod(item)} style={{ margin: '4px' }} type="danger" shape="circle" icon={<DeleteOutlined />} />
                </div >
            }
        },
    ]

    const confirmMethod = (item) => {
        confirm({
            title: '您确定要删除掉吗',
            icon: <ExclamationCircleOutlined />,
            content: '一旦删除将不可恢复',
            onOk() {
                deleteReady(item)
            },
            onCancel() {

            },
        });
    }
    const deleteReady = (item) => {
        console.log(item)
        axios.delete(`/roles/${item.id}`).then(() => {
            query()
        })
    }
    const handleOk = () => {
        setmodelVisable(false)
        setdataSource(dataSource.map(item => {
            if (item.id === currRightId) {
                return {
                    ...item,
                    rights: currRights
                }
            }
            return item
        }))
        axios.patch(`/roles/${currRightId}`, {
            rights: currRights
        })
    }
    const handleCancel = () => setmodelVisable(false)

    const onCheck = (checkKeys) => {
        console.log(checkKeys)
        setcurrRights(checkKeys)
    }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 10
            }} rowKey={(item) => item.id} />

            <Modal title="权限分配" open={modelVisable} onOk={handleOk} onCancel={handleCancel}>
                <Tree
                    checkable
                    treeData={rightList}
                    checkedKeys={currRights}
                    checkStrictly={true}
                    onCheck={onCheck}
                ></Tree>
            </Modal>
        </div>
    )
}
